// 归一化屏幕坐标系
vec2 ProjectionCoord(in vec2 fragCoord, in float scale) {
  //本函数实现将屏幕坐标转换为以画布中心为原点的坐标系，并进行归一化
  //首先当前画布左上角为原点，右下角为iResolution.xy，我们需要将其转换为以中心点为原点，
  vec2 centerCoord = fragCoord - 0.5 * iResolution.xy;
  //然后将坐标归一化, 这里需要取屏幕宽高的最小值，因为画布可能不是正方形，我们需要保证最小的一边长度为1，范围为(-0.5,0.5)
  vec2 normalizationCoord = centerCoord / min(iResolution.x, iResolution.y);
  //此时坐标系的范围是(-0.5,0.5), 为了让坐标系的范围是(-1,1), 我们再乘以2
  vec2 dobuleNormalizationCoord = 2. * normalizationCoord;
  //最后我们再乘以scale, 这样我们就可以控制坐标系的大小
  return scale * dobuleNormalizationCoord;
}

//坐标轴辅助对象，筛选出归属于坐标轴的片元，返回坐标轴颜色
vec4 AxisHelper(in vec2 coord, in float axisWidth, in vec4 xAxisColor, in vec4 yAxisColor) {
  //设置默认颜色为黑色透明度为0
  vec4 color = vec4(0.0);
  //这里dx为例，dFdx返回当前点的coord.x与相邻点的coord.x的差值，然后乘以axisWidth，得到一个屏幕上的一个像素在x方向上的长度
  // dFdx 的入参 必须是一个引用 而不能是一个具体的数值是吗，因为他要靠这个引用来查找相邻片源的该值
  float dx = dFdx(coord.x) * axisWidth;
  float dy = dFdy(coord.y) * axisWidth;
  if(abs(coord.x) < dx) {
    color = xAxisColor;
  } else if(abs(coord.y) < dy) {
    color = yAxisColor;
  }
  return color;
}

//网格辅助对象，筛选出归属于网格的片元，返回网格颜色
vec4 GridHelper(in vec2 coord, in float gridWidth, in vec4 gridColor) {
  vec4 color = vec4(0, 0, 0, 0);
  float dx = dFdx(coord.x) * gridWidth;
  float dy = dFdy(coord.y) * gridWidth;
  //每单位长度的余数，如果说想要2个单位长度的网格，那么需要把coord.x和coord.y都除以2，然后取余数
  vec2 fraction = fract(coord);
  if(fraction.x < dx || fraction.y < dy) {
    color = gridColor;
  }
  return color;
} 

// 投影坐标系辅助对象
vec4 ProjectionHelper(in vec2 coord, in float axisWidth, in vec4 xAxisColor, in vec4 yAxisColor, in float gridWidth, in vec4 gridColor) {
  // 坐标轴
  vec4 axisHelper = AxisHelper(coord, axisWidth, xAxisColor, yAxisColor);
  // 栅格
  vec4 gridHelper = GridHelper(coord, gridWidth, gridColor);
  // =投影坐标系
  return bool(axisHelper.a) ? axisHelper : gridHelper;
}

vec4 LoverHeartHelper(in vec2 coord, in vec4 fragColor) {
  // 圆心坐标
  float x = coord.x;
  float y = coord.y;

  // 爱心公式，将圆变形
  float heart = pow(x * x + y * y - 0.2, 3.0) - x * x * y * y * y * 2.;

  // 判断是否在爱心范围内
  if(heart <= 0.0) {
    fragColor = vec4(0.01, 0.0, 0.09, 1.0); // 红色
  } else {
   // 设置边缘光
    float edgeWidth = 0.1; // 边缘光的宽度
    //这里用到三次 Hermite 插值函数，smoothstep 函数是其近似函数
    //这样的插值相比于线性插值，更加平滑，不会出现明显的端点
    //当然适情况而定有的场景下，你需要转折更明显的线性插值
    float edgeIntensity = smoothstep(0.0, edgeWidth, abs(heart)); // 计算边缘光的强度

    // 边缘光颜色（从绿色到背景色渐变）
    vec4 edgeColor = mix(vec4(0.0, 1, 0.0, 1.0), fragColor, edgeIntensity);

    // 仅在边缘附近显示边缘光
    if(abs(heart) <= edgeWidth) {
      fragColor = edgeColor;
    }
    //问题：为什么这里的边缘光不是贴合边缘的？提示：隐式方程与sdf方程的差异，偏移路径（用法线求得）。
  }

  return fragColor;
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  //片元着色器代码,入参为片元坐标，出参为片元颜色
  vec2 uv = ProjectionCoord(fragCoord, 3.);
  fragColor = ProjectionHelper(uv, 1., vec4(1, 0, 0, 1), vec4(0, 1, 0, 1), 1., vec4(0.57, 0.57, 0.57, 1.0));
  fragColor = LoverHeartHelper(uv, fragColor);
}
